<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<div id="app">
  <div v-model="23">
    {{ msg.name }}
    {{ count }}
    {{ arr[0].name }}
    {{ msg.age }}
  </div>
</div>
<script src="../dist/vue.js"></script>
<script>
  <!--  构造函数或者类-->
  new Vue({
    el: '#app',
    data() {
      console.log(this) // undeinfed
      return {
        name: '黑马'
      }
    },
    created() {
      // 可以直接通过实例.data里面的属性名获取到data里面的数据
      // this._data.name
    //   修改数据的时候触发的
      this.name = '传智'
    },
    beforeCreate() {
    },
    // 声明周期钩子
    render(h) {
      return h(App)
    }
  })

  // vm._data
  // 函数的单独调用，this指向全局对象/node环境
  // 你不知道的js


  /**
   *   1、new Vue传入options配置项
   *   2、调用before生命周期钩子
   *   3、initState(vm) // 初始化data/methods/computed/watcher/...
   *      1、数据代理(this.key可以访问到data里面的数据)
   *      2、数据的响应式劫持
   *        1、判断是不是object，是不是被响应式劫持过（__ob__）
   *        2、new Observer(data)
   *        3、是不是数组
   *          1.数组 > 1、劫持数组的7个方法   2、遍历数组，把数组的每一项进行响应式处理
   *          2、是对象 > walk(data) > 遍历对象调用 > defineReactive(data, key, data[key])
   *          3、defineReactive  1、把data[key]继续进行响应式处理（observer）
   *          4、调用object.defineProperty进行响应式劫持
   *            get >> 收集依赖
   *            set >> 收集的依赖进行更新 >> 设置的新值继续调用observe进行响应式处理
   *
   *   4、created钩子
   */
</script>
</body>
</html>
